<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useUser } from '@/composition/useUser'
import { isNotEmpty, go2Link, isPhone, generateUUID, refresh, copyJSON } from '@/plugins/util.js'

const { user } = useUser();

const guide = ref(copyJSON(user.value.extInfo.guide));
const guideUrls = guide.value.urls
</script>

<template>
    <div class="mt-5 flex justify-center">
        <div class=" flex justify-center items-center w-full flex-wrap">
            <div v-for="(item, index) in guideUrls" :index="index" @click="go2Link(item.url, guide.openUrlType)"
                class="p-2 w-20 cursor-pointer transition hover:-translate-y-2">
                <div class="flex justify-center items-center">
                    <img :src="item.icon" class="w-10 h-10" />
                </div>
                <div class=" my-1  flex justify-center items-center" v-show="guide.showTitle">
                    <span class="bg-white bg-opacity-40 rounded px-1 py-px text-xs truncate">
                        {{ item.name }}
                        <!-- 111111111111111111阿实践活动和加沙的哈沙皇当局阿斯11111111111111111111111111111111111111111111111111 -->
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped></style>
